<template>
<el-dialog class="add-exp" :append-to-body="true" :title="addForm.title" :visible.sync="addForm.show" width="470px" :close-on-click-modal="false">
    <el-upload v-if="addForm.isUpload" class="import-exp-templat" drag action="https://jsonplaceholder.typicode.com/posts/">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">点击或将文件拖拽到这里上传<br/><span>只支持JSON格式的文件</span></div>
    </el-upload>
    <el-form ref="addExpForm" :model="addForm.form" :rules="rules" label-width="100px" @submit.native.prevent>
        <el-form-item label="项目名称">{{currentProjectInfo.projectName}}</el-form-item>
        <el-form-item label="实验名称" prop="experimentName">
            <el-input :maxlength="50" clearable placeholder="请输入实验名称" v-model="addForm.form.experimentName"></el-input>
        </el-form-item>
        <el-form-item label="实验描述">
            <el-input :maxlength="100" type="textarea" :rows="5" clearable placeholder="请输入实验描述" v-model="addForm.form.description"></el-input>
        </el-form-item>
        <el-form-item label="存储位置">
            <select-folder v-model="addForm.form.catalogId" @input="input"></select-folder>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addForm.show=false">取 消</el-button>
      <el-button type="primary" v-preventReClick="2000" @click="handleSave">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
import {
    mapGetters
} from 'vuex'
import SelectFolder from './SelectFolder'
export default {
    name: 'AddExp',
    props: {
        addForm: {
            type: Object,
            required: true
        }
    },
    components: { SelectFolder },
    computed: {
        ...mapGetters({
            currentProjectInfo: 'common/getCurrentProjectInfo'
        })
    },
    data () {
        return {
            rules: {
                experimentName: [{
                    required: true,
                    message: '请输入实验名称',
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        input (val) {
            this.$emit('getParentCatalogId', val)
        },
        handleSave () {
            this.$refs['addExpForm'].validate((valid) => {
                if (valid) {
                    this.$emit('save')
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less">
.import-exp-templat {
    .el-upload--text {
        display: flex;
        justify-content: center;
        margin-bottom: 18px;
        .el-upload-dragger {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: rgba(0, 0, 0, .02);
            border: 1px solid rgba(0, 0, 0, .15);
            height: 140px;
            .el-icon-upload {
                margin: 0;
                color: rgb(81, 153, 239) !important;
                font-size: 41px;
            }
            .el-upload__text {
                font-size: 16px;
                span {
                    font-size: 14px;
                    color: rgba(0, 0, 0, .43);
                }
            }
        }
    }
}
.add-exp {
    .el-input, .el-textarea__inner, .vue-treeselect {
        width: 320px !important;
    }
}
</style>
